<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>
<body>

<img src="img/1.jpg" data-target="img/1-l.jpg" class="my-small">
<img src="img/2.jpg" data-target="img/2-l.jpg" class="my-small">
<img src="img/3.jpg" data-target="img/3-l.jpg" class="my-small">
<img src="img/4.jpg" data-target="img/4-l.jpg" class="my-small">
<hr/>
<img src="img/1-l.jpg" class="my-big">


<script src="js/jquery-1.11.3.js"></script>
<script>
  //点击小图片，下方my-big中显示大图片
  $(".my-small").on("click",function(){
    //获得当前单击的小图片$img
    var $img=$(this);
    //获得$img上自定义属性data-target的值保存在变量src中
    var src=$img.attr("data-target")
    //查找class为my-big的大图片，设置其src为src
    $(".my-big").attr("src",src) //prop
              //.attr({src}) //prop
  })
</script>
</body>
</html>